<template>
	<view>
		<uv-navbar leftText="返回" autoBack="true" :title="pages_status === '999'?'创建诊所':'修改诊所信息'" @leftClick="backClick"></uv-navbar>
		
		<RxLogo></RxLogo>
		
		<view class="form_class">
			<view class="input_class"><uv-input border="bottom" v-model="pointsInfo.clinic"><template v-slot:prefix>
				<uv-text text="诊所名称" margin="0 3px 0 0" type="tips"></uv-text></template>
			</uv-input></view>
			
			<view class="input_class">
				<uv-row justify="space-between" gutter="10" @click="PickerClick">
					<uv-col span="4">
						<uv-input border="bottom" v-model="pointsInfo.addressProvince" disabled disabledColor="ffffff"><template v-slot:prefix>
							<uv-text text="省" margin="0 3px 0 0" type="tips"></uv-text></template>
						</uv-input>
					</uv-col>
					<uv-col span="4">
						<uv-input border="bottom" v-model="pointsInfo.addressCity" disabled disabledColor="ffffff"><template v-slot:prefix>
							<uv-text text="市" margin="0 3px 0 0" type="tips"></uv-text></template>
						</uv-input>
					</uv-col>
					<uv-col span="4">
						<uv-input border="bottom" v-model="pointsInfo.addressCounty" disabled disabledColor="ffffff"><template v-slot:prefix>
							<uv-text text="县" margin="0 3px 0 0" type="tips"></uv-text></template>
						</uv-input>
					</uv-col>
				</uv-row>
			</view>
			
			<!-- 全国地区三级数据联动 -->
			<RxThreeLinkage ref="open_picker" v-on:customEvent="threeLinkageCustomEvent"></RxThreeLinkage>
			
			<view class="input_class"><uv-input border="bottom" v-model="pointsInfo.address"><template v-slot:prefix>
				<uv-text text="详细地址" margin="0 3px 0 0" type="tips"></uv-text></template>
			</uv-input></view>
			
		</view>
		<view class="form_submit_class">
			<view style="width: 70%;margin-left: auto;margin-right: auto;">
				<uv-button :hairline="false" :text="pages_status === '999'?'创建诊所':'修改诊所'" color="#2c9c3c" customTextStyle="color: #ffffff;font-size: 28rpx" @click="createSubmit"></uv-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import RxLogo from '@/components/RxLogo/RxLogo.vue'
	import RxThreeLinkage from '@/components/RxThreeLinkage/RxThreeLinkage.vue'
	export default {
		components: {
			RxLogo, RxThreeLinkage
		},
		data() {
			return {
				pages_status: '999',	// '999'是创建诊所，其它值是修改诊所信息 
				userinfo: {},
				types: null,
				pointsInfo: {
					clinic: null,
					address: null,
					addressProvince: null,
					addressCity: null,
					addressCounty: null
				}
			}
		},
		// 接受参数
		onLoad(option) {
			this.pages_status = option.res
			this.userinfo = this.$store.state.userinfo
			if (this.pages_status !== '999') {
				for (let i = 0; i < this.userinfo.clinic_data_all.length; i++) {
					if ( this.pages_status === this.userinfo.clinic_data_all[i]._id ) {
						this.pointsInfo.clinic = this.userinfo.clinic_data_all[i].clinic
						this.pointsInfo.address = this.userinfo.clinic_data_all[i].address
						this.pointsInfo.addressProvince= this.userinfo.clinic_data_all[i].addressProvince
						this.pointsInfo.addressCity = this.userinfo.clinic_data_all[i].addressCity
						this.pointsInfo.addressCounty = this.userinfo.clinic_data_all[i].addressCounty
					}
				}
			}
		},
		methods: {
			backClick() {
				uni.navigateBack()
				// uni.redirectTo({
				//   url:'/pages/settings/components/change_clinic/change_clinic'
				// })
			},
			PickerClick() {
				this.$refs.open_picker.open()
			},
			areAllValuesNotEmpty(pointsInfo) {
			    return Object.values(pointsInfo).every(value => value !== null && value !== undefined && value !== '');  
			},
			createSubmit() {
				var _this = this
				const Empty = _this.areAllValuesNotEmpty(_this.pointsInfo)
				if (Empty) {
					uni.showToast({ title: '诊所加载中', icon: 'loading' })
					if(_this.pages_status !== '999') {
						_this.$api.change_clinic({
							_id: _this.pages_status,
							data: _this.pointsInfo,
							userId: _this.$store.state.userinfo.userId,
							types: _this.userinfo.types
						}).then((res) => {
							for (let i = 0; i < _this.userinfo.clinic_data_all.length; i++) {
								if ( _this.pages_status === _this.userinfo.clinic_data_all[i]._id ) {
									_this.userinfo.clinic_data_all[i].clinic = _this.pointsInfo.clinic
									_this.userinfo.clinic_data_all[i].address = _this.pointsInfo.address
									_this.userinfo.clinic_data_all[i].addressProvince = _this.pointsInfo.addressProvince
									_this.userinfo.clinic_data_all[i].addressCity = _this.pointsInfo.addressCity
									_this.userinfo.clinic_data_all[i].addressCounty = _this.pointsInfo.addressCounty
								}
							}
							_this.$store.dispatch('set_userinfo', _this.userinfo)
							setTimeout(function () {
								_this.backClick()
							}, 1000);
						})
					} else {
						_this.$api.create_clinic({
							data: _this.pointsInfo,
							userId: _this.$store.state.userinfo.userId,
							types: _this.userinfo.types
						}).then((res)=> {
							_this.userinfo.clinic_id_list.push(res.data._id)
							_this.userinfo.clinic_data_all.push(res.data)
							_this.$store.dispatch('set_userinfo', _this.userinfo)
							setTimeout(function () {
								_this.backClick()
							}, 1000);
						})
					}
				} else {
					uni.showToast({
						icon: 'error',
						title: '完善数据'
					})
				}
			}, 
			threeLinkageCustomEvent(data) {
				// 从子组件接收的省市区三级联动数据
				this.pointsInfo.addressProvince = data.addressProvince
				this.pointsInfo.addressCity = data.addressCity
				this.pointsInfo.addressCounty = data.addressCounty
			}
		}
	}
</script>

<style>
	
	.form_class {
		width: 85%;
		margin-top: 15%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
	}
	
	.input_class {
		margin-bottom: 8px;
	}
	
	.form_submit_class {
		margin-top: 10%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
	}
</style>
